<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联动</title>
</head>

<body>
  <div id="app">

    <h1>{{title}}</h1>

    <hr>

    省份：
    <select v-model="pid" @change="queryCity">
      <!-- 
        vue的模板循环格式：
        v-for="循环的变量名称 in 数组"
        在v-for的标记里面就可以使用循环变量了
        属性的注入要在属性名称前加上:
      -->
      <option v-for="d in plist" :value="d.pid">
        {{ d.province }}
      </option>

    </select>

    城市：
    <select v-model="cid">
      <option v-for="d in clist" :value="d.cid">
        {{ d.city }}
      </option>
    </select>


    <!-- <button onclick="alert('清除缓存完毕')">清除缓存</button> -->

    <div v-if="!loading">
      <table border="1">

        <thead>
          <tr>
            <th>编号</th>
            <th>城市名</th>
            <th>信息修改时间</th>
          </tr>
        </thead>

        <tbody>

          <tr v-for="d in clist">
            <td>{{d.cid}}</td>
            <td>{{d.city}}</td>
            <td>{{ tools.formatDate(d.lastupdate) }}</td>
          </tr>

        </tbody>

      </table>
    </div>

    <div v-if="loading">
      数据查询中，请稍候。。。
    </div>

    <div>

      {{pid}} - {{cid}}

    </div>

  </div>

  <script src="./js/linkinfo.js" type="module"></script>
</body>

</html>